<template>
  <el-dialog
    title="密码重置"
    :visible.sync="dialogVisible"
    width="30%"
    top="13vh"
    :before-close="closePasswordResetDialogHandle"
    :close-on-click-modal="false">
    <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="85px"
           @keyup.enter.native="sysUserPasswordResetHandle" @keyup.esc.native="closePasswordResetDialogHandle">
      <el-form-item label="新密码" prop="nPassWord">
        <el-input v-model="passwordForm.nPassWord" maxlength="20" show-password placeholder="请输入用户新密码"></el-input>
        <span v-show="containChar" class="fz13 container-color">
          √ 包含大小写字母
        </span>
          <span v-show="containNumber" class="fz13 container-color">
          √ 包含数字
        </span>
          <span v-show="containSpecialChar" class="fz13 container-color">
          √ 包含特殊字符
        </span>
        </el-form-item>
        <el-form-item label="确认密码" prop="cPassWord">
          <el-input v-model="passwordForm.cPassWord" maxlength="11" show-password placeholder="请输入确认密码"></el-input>
          <span v-show="pwdLevel !== -1" class="fz13 container-color">
          密码强度为: {{ pwdLevelName[pwdLevel] }}
        </span>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closePasswordResetDialogHandle">取消</el-button>
      <el-button :disabled="buttonLoad" type="primary" @click="sysUserPasswordResetHandle">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { encrypt } from "@/assets/js/encryptUtils";

  export default {
    name: "user-password-reset",
    props: {
      // 弹出框是否显示
      dialogVisible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      // 用户新密码校验
      let checkNPassWord = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error("新密码不能为空!"))                // 验证失败
        }
        if (value.length < 6) {
          this.cleanPasswordFlagHandle()
          return callback(new Error("新密码长度不能小于6!"))            // 验证失败
        }
        if (this.passwordForm.oPassWord === value) {
          this.cleanPasswordFlagHandle()
          return callback(new Error("新密码与旧密码一致，请重新输入!"))   // 验证失败
        }
        callback()  // 通过验证
      }
      // 用户确认密码校验
      let checkCPassWord = (rule, value, callback) => {
        if (this.passwordForm.nPassWord === '') {                 // 用户新密码为空
          this.pwdLevel = -1
          return callback(new Error("请输入用户新密码!"))              // 验证失败
        }
        if (value === '') {
          this.pwdLevel = -1
          return callback(new Error("确认密码不能为空!"))              // 验证失败
        }
        if (this.passwordForm.nPassWord !== value) {
          this.pwdLevel = -1
          return callback(new Error("新密码与确认密码不同，请确认!"))    // 验证失败
        }
        callback()  // 通过验证
      }
      return {
        // 系统用户信息对象
        sysUser: {
          // 用户id
          userId: '',
          // 用户名字
          username: '',
        },
        // 密码表单对象
        passwordForm: {
          // 新密码
          nPassWord: '',
          // 确认密码
          cPassWord: '',
        },
        // 按钮是否可被点击[false-可以被点击 true-不可被点击]
        buttonLoad: false,
        // 新密码是否包含大小写字符[false-不包含 true-包含]
        containChar: false,
        // 新密码是否包含数字[false-不包含 true-包含]
        containNumber: false,
        // 新密码是否包含键盘可输入特殊字符[false-不包含 true-包含]
        containSpecialChar: false,
        // 用户新密码的强度等级[-1-没有输入密码 0-一级 1-二级 2-三级]
        pwdLevel: -1,
        // 新密码的强度[分为大小写字母、数字、键盘可输入特殊字符，包含一种的密码强度为一级、两种为二级、  三种为三级]
        pwdLevelName: ['一级', '二级', '三级'],
        // 匹配大小写字母正则表达式
        charRegex: /[A-Za-z]+/,
        // 匹配数字正则表达式
        numberRegex: /[0-9]+/,
        // 匹配键盘可输入特殊字符正则表达式
        specialRegex: /[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·！￥…（）—《》？：“”【】、；‘’，。]/im,
        // 系统用户密码重置校验规则
        passwordRules: {
          nPassWord: [
            { required: true, validator: checkNPassWord, trigger: 'blur' },
          ],
          cPassWord: [
            { required: true, validator: checkCPassWord, trigger: 'blur' },
          ],
        }
      }
    },
    methods: {
      /**
       * 初始化系统用户密码重置弹出框事件
       * @param {Object} sysUser
       */
      initSysUserDialogHandle(sysUser) {
        this.sysUser = sysUser
      },
      /**
       * 系统用户密码重置确认事件
       */
      sysUserPasswordResetHandle() {
        this.$refs.passwordForm.validate((valid) => {
          if (!valid) {
            return false
          }
          // 按钮不可被点击
          this.buttonLoad = true

          let obj = {
            // 用户id
            userId: this.sysUser.userId,
            // 新密码
            password: encrypt(this.passwordForm.nPassWord),
          }
          this.$axios.$post('/sys/user/password/reset', obj)
            .then(() => {
              let message = this.sysUser.username + '密码重置成功'
              this.notify('success', '操作成功', message)
              // 关闭系统用户密码重置弹出框
              this.closePasswordResetDialogHandle()
            })
            .catch(() => {})
            .finally(() => {
              // 按钮恢复可点击
              this.buttonLoad = false
            })
        })
      },
      /**
       * 弹出框关闭处理事件
       */
      closePasswordResetDialogHandle() {
        // 清空系统用户重置密码表单信息
        this.$refs.passwordForm.resetFields()
        // 清空系统用户信息
        this.sysUser = {}

        this.cleanPasswordFlagHandle()
        // 向上传递事件
        this.$emit('close-password-reset-dialog')
      },
      /**
       * 清空密码包含字符标记事件
       */
      cleanPasswordFlagHandle() {
        // 包含大小写字母标记清除
        this.containChar = false
        // 包含数字标记清除
        this.containNumber = false
        // 包含键盘可输入特殊字符标记清除
        this.containSpecialChar = false
      }
    }
  }
</script>

<style scoped>
  .container-color {
    color: #5CB87A;
  }
</style>
